Separate AM/PM picker column (#69) - #86
Merged
Merged
Conversation
When use12HourPicker is enabled, separateAmPmPicker renders AM/PM as a dedicated scrollable column after seconds instead of appending it to each hour. The hours column shows 12, 1, 2, …, 11 in clock order. Public API (onDurationChange, latestDuration, setValue) keeps using 0–23 hours. hourLimit is honoured in this mode: the hour column's rows grey based on the currently selected AM/PM, and momentum-scroll snaps to the nearest valid hour in that half. The AM/PM column is intentionally limit-free so users can always toggle halves to reach any valid hour. Wraparound limits (max < min) are handled the same as in the existing 12-hour mode. The TimerPickerModal width calculation now counts the AM/PM column when present, so default styles work without manual pickerColumnWidth tweaks. maximumHours remains ignored in separate mode (warns at runtime).
…y refs
- DurationScroll gains `getValidValue` + `isItemDisabled` callback props.
TimerPicker injects cross-column context (current AM/PM, hourLimit,
hourInterval) through these instead of plumbing combinedHourLimit /
currentAmPm through DurationScroll → PickerItem.
- One snap path: DurationScroll's onMomentumScrollEnd calls the validate
callback, no more reentrant setValue from TimerPicker.
- findNearestValidCycleIdx now takes interval and iterates 0..11 step
interval, so hourInterval > 1 no longer snaps to a non-rendered cycleIdx.
Adds parameterised interval coverage to the test suite.
- Drop dead selectedAmPmRef + sync useEffect.
- Replace the synthetic `RefObject<number>` cast on latestDuration.hours
with a proper `LatestDurationRef = { readonly current: number }` type
used by both TimerPickerRef and TimerPickerModalRef.
- Add "amPm" to PickerColumn so pickerColumnWidth.amPm works and the modal
width math routes through the existing resolveColumnWidth helper.
cycleIdx was internal jargon. hourSlot reads naturally as 'a slot in the
12-hour clock-face column' where slot 0 is the 12 (noon/midnight) position.
splitHour24 returns { amPm, hourSlot }; findNearestValidHourSlot replaces
findNearestValidCycleIdx; getValidHourSlot/isHourSlotDisabled in TimerPicker.
|
This is really useful, please merge! |
Owner
Author
|
Hey @JacobCll 👋 My bad! left this on ice for too long. Just had a couple of things to check before merging. I'll get it in this weekend |
|
This is very useful. Waiting for the merge! |
Owner
Author
|
Just released this in v2.7.0 - apologies for the delay! |
troberts-28
added a commit
to JasperVercammen/react-native-timer-picker
that referenced
this pull request
Sep 1, 2026
Brings the branch up to date with develop, which gained separateAmPmPicker (troberts-28#69/troberts-28#86) and the snap/greying callback refactor after this branch forked. Conflicts in DurationScroll.tsx, DurationScroll/types.ts and TimerPicker.tsx are all cases of develop refactoring underneath the branch rather than genuine semantic overlap, so they are resolved to develop's side. The accessibility layer in those three files is reinstated and corrected in the following commit. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cz8qeb64YfaLZa6MDf2SY5
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #69.
Summary
separateAmPmPickerprop onTimerPicker/TimerPickerModal. When combined withuse12HourPicker, AM/PM renders as a dedicated scrollable column after seconds and the hour column shows12, 1, 2, …, 11. PubliconDurationChange/latestDuration/setValuekeep using 0–23 hours.hourLimitis honoured in separate mode: hour-column rows grey + snap based on the currently-selected AM/PM. The AM/PM column is freely toggleable so users can always switch halves to reach a valid hour. Wraparound limits (max < min) work the same as in the existing 12-hour mode.hourInterval > 1is respected end-to-end (rendering, snap, greying).separateAmPmItemandselectedSeparateAmPmItem.pickerColumnWidth.amPmnow also works (modal width math routed through the existingresolveColumnWidthhelper).DurationScrollaccepts optionalgetValidValueandisItemDisabledcallbacks;TimerPickerinjects cross-column context (current AM/PM + hourLimit + hourInterval) through these instead of passing extra prop channels through toPickerItem. No reentrantsetValuefrom the orchestrator.LatestDurationRef = { readonly current: number }replaces the syntheticRefObject<number>cast onlatestDuration.hours/latestDuration.*.cycleIdx→hourSlot(andfindNearestValidHourSlot) for readability.pickerColumnWidth.amPmoption. Example app gains aseparateAmPmPickermodal page and a cross-midnighthourLimittest page.